<template>
  <n-modal
    :show="props.visible"
    preset="card"
    :title="props.data?.postId ? '修改岗位' : '添加岗位'"
    style="width: 500px"
    @after-enter="handleOpen"
    @close="handleClose"
  >
    <n-spin :show="spinLoading">
      <n-form ref="formRef" :model="form" label-placement="left" :rules="rules" :label-width="80">
        <n-form-item label="岗位名称" path="postName">
          <n-input v-model:value="form.postName" placeholder="请输入岗位名称" clearable />
        </n-form-item>

        <n-form-item label="岗位编码" path="postCode">
          <n-input v-model:value="form.postCode" placeholder="请输入岗位编码" clearable />
        </n-form-item>

        <n-form-item label="岗位顺序" path="postSort">
          <n-input-number
            class="w-full"
            v-model:value="form.postSort"
            placeholder="请输入岗位顺序"
            clearable
            :min="0"
          />
        </n-form-item>

        <n-form-item label="岗位状态">
          <n-radio-group v-model:value="form.status">
            <template v-for="item in dicts.sys_normal_disable" :key="item.raw.dictCode">
              <n-radio :value="item.value">{{ item.label }}</n-radio>
            </template>
          </n-radio-group>
        </n-form-item>

        <n-form-item label="备注" path="remark">
          <n-input v-model:value="form.remark" type="textarea" placeholder="请输入内容" clearable />
        </n-form-item>
      </n-form>
    </n-spin>

    <template #footer>
      <n-space justify="end">
        <n-button @click="handleClose">取消</n-button>
        <n-button type="primary" @click="submitCallback" :loading="loading" :disabled="loading">
          确定
        </n-button>
      </n-space>
    </template>
  </n-modal>
</template>

<script lang="ts" setup>
import { useMessage } from 'naive-ui';
import { ref } from 'vue';
import { useDict } from '@/hooks/useDict';
import { addPost, getPostInfo, updatePost } from '@/apis/system/post';
import { useForm } from '@/hooks/useForm';

const emits = defineEmits(['close']);
const props = defineProps<{ visible: boolean; data: any }>();
const spinLoading = ref(false);
const loading = ref(false);

// 获取字典：状态
const { dicts } = useDict('sys_normal_disable');

const { formRef, reset, form, validate } = useForm({
  postName: null, // 岗位名称
  postCode: null, // 岗位编码
  postSort: 0, // 岗位顺序
  status: '0', // 岗位状态 0:正常 1:停用
  remark: null, // 备注
});

const message = useMessage();
const rules = ref({
  postName: [{ required: true, message: '岗位名称不能为空', trigger: 'blur' }],
  postCode: [{ required: true, message: '岗位编码不能为空', trigger: 'blur' }],
  postSort: [{ required: true, type: 'number', message: '岗位顺序不能为空', trigger: 'blur' }],
});

const handleOpen = async () => {
  if (props.data?.postId) {
    spinLoading.value = true;
    const res: any = await getPostInfo(props.data.postId);
    if (res.code == 200) {
      Object.assign(form, res.data);
    }
    spinLoading.value = false;
  }
};

const handleClose = (needRefresh = false) => {
  emits('close', { needRefresh });
  reset();
};

// 提交表单
const submitCallback = async (e: MouseEvent) => {
  e.preventDefault();
  const errors = await validate();
  if (errors) return;

  loading.value = true;
  try {
    let res: any;
    if (props.data?.postId !== undefined) {
      res = await updatePost(form);
    } else {
      res = await addPost(form);
    }
    if (res.code == 200) {
      message.success(props.data?.menuId !== undefined ? '修改成功' : '添加成功');
      handleClose(true);
    }
  } catch (error) {
  } finally {
    loading.value = false;
  }
};
</script>

<style lang="less" scoped></style>
